<template>
    <div class="wrapper">
        <div class="title">
            <span @click="choice = 1" :class="[choice === 1 ? 'on' : '']">待付款</span>
            <span @click="choice = 2" :class="[choice === 2 ? 'on' : '']">待收货</span>
            <span @click="choice = 3" :class="[choice === 3 ? 'on' : '']">代发货</span>
            <span @click="choice = 4" :class="[choice === 4 ? 'on' : '']">已完成</span>
            <span @click="choice = 5" :class="[choice === 5 ? 'on' : '']">退款</span>
        </div>
        <div class="list-wrapper" v-show="choice === 1">
            <div class="box">
                <div class="top">
                    <span>订单号：20180528000001</span>
                    <p class="on">在线支付</p>
                </div>
                <ul class="list" v-show="!show">
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选CD牌精选CD牌精选CD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                </ul>
                <div class="total">
                    <dis class="left">
                        <span>总计:</span>
                        <span>30件</span>
                    </dis>
                    <dis class="left">
                        <span>合计:</span>
                        <span>￥10000.00</span>
                    </dis>
                </div>
                <div class="btn-wrapper">
                    <p>支付成功，获取<span>40</span>积分</p>
                    <button form-type="submit" class="btn btn2">删除订单</button>
                    <button form-type="submit" class="btn btn1">在线支付</button>
                </div>
            </div>
        </div>
        <div class="list-wrapper" v-show="choice === 2">
            <div class="box">
                <div class="top">
                    <span>订单号：20180528000001</span>
                    <p>货到付款</p>
                </div>
                <ul class="list" v-show="!show">
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                </ul>
                <div class="total">
                    <dis class="left">
                        <span>总计:</span>
                        <span>30件</span>
                    </dis>
                    <dis class="left">
                        <span>合计:</span>
                        <span>￥10000.00</span>
                    </dis>
                </div>
                <div class="btn-wrapper">
                    <button class="btn btn7">货到付款</button>
                </div>
            </div>
            <div class="box">
                <div class="top">
                    <span>订单号：20180528000001</span>
                    <p class="on">在线支付</p>
                </div>
                <ul class="list" v-show="!show">
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                </ul>
                <div class="total">
                    <dis class="left">
                        <span>总计:</span>
                        <span>30件</span>
                    </dis>
                    <dis class="left">
                        <span>合计:</span>
                        <span>￥10000.00</span>
                    </dis>
                </div>
                <div class="btn-wrapper">
                    <p>支付成功，获取<span>40</span>积分</p>
                    <button form-type="submit" class="btn btn1">在线支付</button>
                </div>
            </div>
        </div>
        <div class="list-wrapper" v-show="choice === 3">
            <div class="box">
                <div class="top">
                    <span>订单号：20180528000001</span>
                    <p>货到付款</p>
                </div>
                <ul class="list" v-show="!show">
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                </ul>
                <div class="total">
                    <dis class="left">
                        <span>总计:</span>
                        <span>30件</span>
                    </dis>
                    <dis class="left">
                        <span>合计:</span>
                        <span>￥10000.00</span>
                    </dis>
                </div>
                <div class="btn-wrapper">
                    <button form-type="submit" class="btn btn7">货到付款</button>
                </div>
            </div>
            <div class="box">
                <div class="top">
                    <span>订单号：20180528000001</span>
                    <p class="on">在线支付</p>
                </div>
                <ul class="list" v-show="!show">
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                </ul>
                <div class="total">
                    <dis class="left">
                        <span>总计:</span>
                        <span>30件</span>
                    </dis>
                    <dis class="left">
                        <span>合计:</span>
                        <span>￥10000.00</span>
                    </dis>
                </div>
                <div class="btn-wrapper">
                    <p>支付成功，获取<span>40</span>积分</p>
                    <button form-type="submit" class="btn btn1">在线支付</button>
                </div>
            </div>
        </div>
        <div class="list-wrapper" v-show="choice === 4">
            <div class="box">
                <div class="top">
                    <span>订单号：20180528000001</span>
                    <p>货到付款</p>
                </div>
                <ul class="list" v-show="!show">
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                </ul>
                <div class="total">
                    <dis class="left">
                        <span>总计:</span>
                        <span>30件</span>
                    </dis>
                    <dis class="left">
                        <span>合计:</span>
                        <span>￥10000.00</span>
                    </dis>
                </div>
                <div class="btn-wrapper">
                    <button form-type="submit" class="btn btn3">退款</button>
                    <button form-type="submit" class="btn btn4">删除订单</button>
                </div>
            </div>
            <div class="box">
                <div class="top">
                    <span>订单号：20180528000001</span>
                    <p class="on">在线支付</p>
                </div>
                <ul class="list" v-show="!show">
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                </ul>
                <div class="total">
                    <dis class="left">
                        <span>总计:</span>
                        <span>30件</span>
                    </dis>
                    <dis class="left">
                        <span>合计:</span>
                        <span>￥10000.00</span>
                    </dis>
                </div>
                <div class="btn-wrapper">
                    <p>支付成功，获取<span>40</span>积分</p>
                    <button form-type="submit" class="btn btn5">我要自提</button>
                    <button form-type="submit" class="btn btn6">确认收货</button>
                </div>
            </div>
        </div>
        <div class="list-wrapper" v-show="choice === 5">
            <div class="box">
                <div class="top">
                    <span>订单号：20180528000001</span>
                    <p>货到付款</p>
                </div>
                <ul class="list" v-show="!show">
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                </ul>
                <div class="total">
                    <dis class="left">
                        <span>总计:</span>
                        <span>30件</span>
                    </dis>
                    <dis class="left">
                        <span>合计:</span>
                        <span>￥10000.00</span>
                    </dis>
                </div>
                <div class="btn-wrapper">
                    <button form-type="submit" class="btn btn3">取消退款</button>
                    <button form-type="submit" class="btn btn4">退款中</button>
                </div>
            </div>
            <div class="box">
                <div class="top">
                    <span>订单号：20180528000001</span>
                    <p class="on">在线支付</p>
                </div>
                <ul class="list" v-show="!show">
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                        <div class="desc">
                            <h5>BCD牌精选东北大米</h5>
                            <span class="count">10件</span>
                            <p>￥250.00+70积分</p>
                            <span>25kg装</span>
                            <span class="money">￥250.00/件</span>
                        </div>
                    </li>
                </ul>
                <div class="total">
                    <dis class="left">
                        <span>总计:</span>
                        <span>30件</span>
                    </dis>
                    <dis class="left">
                        <span>合计:</span>
                        <span>￥10000.00</span>
                    </dis>
                </div>
                <div class="btn-wrapper">
                    <button form-type="submit" class="btn btn4">退款完成</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      choice: 1
    }
  },
  onLoad (options) {
    console.log(options)
    this.choice = Number(options.choice)
    console.log(this.choice)
  }
}
</script>
<style lang="scss" scoped>
@import 'static/css/base.scss';
html,body{
    background: #f4f4f4;
}
.wrapper{
    .title{
        display: flex;
        justify-content: space-between;
        height: 80rpx;
        line-height: 80rpx;
        background: #fff;
        font-size: 30rpx;
        padding: 0 20rpx;
        color: #333;
        span.on{
            color: #22ac38;
        }
    }
    .list-wrapper{
        font-size: 28rpx;
        .box{
            margin-top: 10rpx;
            padding: 0 20rpx 100rpx 20rpx;
            background: #fff;
            .top{
                display: flex;
                justify-content: space-between;
                height: 70rpx;
                line-height: 70rpx;
                border-bottom: 1rpx solid #f4f4f4;
                span{
                    color: #333;
                }
                p{
                    color: #ff9933;
                    &.on{
                        color: #22ac38;
                    }
                }
            }
            .list{
                margin-top: 12rpx;
                color: #333;
                font-size: 26rpx;
                li{
                    display: flex;
                    background: #fff;
                    padding: 10rpx 20rpx;
                    margin-bottom: 4rpx;
                    border-bottom: 1rpx solid #f4f4f4;
                    .img{
                        width: 230rpx;
                        height: 160rpx;
                        overflow: hidden;
                        img{
                        width: 100%;
                        height: 100%;
                        }
                    }
                    .desc{
                        flex: 1;
                        margin-left: 30rpx;
                        position: relative;
                        h5{
                           width: 350rpx;
                           @extend %text-limit
                        }
                        p{
                        font-size: 28rpx;
                        color: #ed1c24;
                        margin: 30rpx 0;
                        }
                        span{
                        color: #666;
                        }
                        .count{
                            position: absolute;
                            top: 0;
                            right: 0;
                        }
                        .money{
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            color: #ed1c24;
                        }
                    }
                
                }
            }
            .total{
                display: flex;
                font-size: 28rpx;
                .left{
                    flex: 1;
                    text-align: right;
                    height: 80rpx;
                    line-height: 80rpx;
                    span{
                        &:last-child{
                            color: #ed1c24;

                        }
                    }
                }
            }
            .btn-wrapper{
                position: relative;
                p{
                    position: absolute;
                    left: 0;
                    top: 35rpx;
                    color: #666;
                    font-size: 22rpx;
                    span{
                        color: #ed1c24;
                    }
                }
                .btn{
                    width: 188rpx;
                    height: 60rpx;
                    line-height: 60rpx;
                    background: #ff9933;
                    color: #fff;
                    border-radius: 6rpx;
                    text-align: center;
                    border:none;
                    font-size: 28rpx;
                    position: absolute;
                    top: 20rpx;
                }
                .btn2{
                    right: 218rpx;
                }
                .btn1{
                    right: 0;
                    background: #22ac38;
                }
                .btn3{
                    right: 218rpx;
                    background: #cc3333;
                }
                .btn4{
                    right: 0;
                    background: #d4d4d4;
                }
                .btn5{
                    right: 218rpx;
                }
                .btn6{
                    right: 0;
                    background: #cc3333;
                }
                .btn7{
                    right: 0;
                    background: #ff9933;
                }
            }
        }
        
    }
}
</style>
